<template>
	<div class="content">
		<Notice></Notice>
		<u-navbar :is-back="false" v-show="isNavbar">
			<view class="top flex">
				<u-icon class="cate" name="grid" @click="openSubjects"></u-icon>
				<span class="tab active">{{!currentSubject.length?'日常监测':currentSubject[0].title}}</span>
				<u-icon class="search" name="search" @click="toPath('/pages/search/search?t=1')"></u-icon>
			</view>
		</u-navbar>
		<u-tabs bg-color="#F2F3F7" :list="tabs" :is-scroll="false" :current="tabCurrent" @change="change"></u-tabs>
		<div :class="'tools '+(isShowMask?'':'hide')">
			<u-dropdown @open="isShowMask = true" @close="isShowMask = false" v-if="!!filterList.length">
				<u-dropdown-item v-model="filterId" :title="filterTitle" :options="filterList" @change="filterChange"></u-dropdown-item>
			</u-dropdown>
			<div class="r flex">
				<i class="sort" @click="handle_sort"></i>
				<i class="multiple" @click="handle_multiple"></i>
				<i class="chart" @click="toPath('/pages/statistics/statistics')"></i>
				<i class="filter" @click="handle_filter"></i>
			</div>
		</div>
		<div class="container">
			<!-- 全部 -->
			<AllList ref="allList" v-show="tabCurrent == 0" @updateRow="updateActionRow"></AllList>
			<!-- 图片 -->
			<ImageList ref="imgList" v-show="tabCurrent == 1" @updateRow="updateActionRow"></ImageList>
			<!-- 视频 -->
			<VideoList ref="videoList" v-show="tabCurrent == 2" @updateRow="updateActionRow"></VideoList>
		</div>

		<div class="options flex" v-if="$store.state.multipleMode">
			<u-checkbox v-model="isAllCheck" @change="checkAll">全选</u-checkbox>
			<div class="r flex">
				<div class="r-i" @click="addWarn">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/remind.png"></u-image>
					<div class="text">加入预警</div>
				</div>
				<div class="r-i" @click="markRead">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/readed.png"></u-image>
					<div class="text">标记已读</div>
				</div>
				<div class="r-i" @click="changeSentiment">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/sentiment.png"></u-image>
					<div class="text">更改倾向性</div>
				</div>
				<div class="r-i" @click="del">
					<u-image class="icon" width="36rpx" height="36rpx" src="./../../static/delete.png"></u-image>
					<div class="text">删除</div>
				</div>
			</div>
		</div>
		<!-- <custom-tabbar tabIndex=0 class="bottom"></custom-tabbar> -->
		<Subjects :visiable="isSubjects"></Subjects>
		<Sort></Sort>
		<Sentiment></Sentiment>
		<Del :type="'subject'"></Del>
		<FilterPop :filters="filterList" :flag="'home'"></FilterPop>
		<Action :row="actionData.row" :flag="actionData.flag"></Action>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { mapState } from "vuex";
import AllList from "@/components/allList.vue";
import ImageList from "@/components/imageList.vue";
import VideoList from "@/components/videoList.vue";
import Subjects from "@/components/subjects.vue";
import Sort from "@/components/sortPop.vue";
import Sentiment from "@/components/sentimentPop.vue";
import Del from "@/components/delPop.vue";
import FilterPop from "@/components/filterPop.vue";
import Action from "@/components/action.vue";

import { alias, addAlert, toRead } from "@/api/subject.js";

export default {
	components: {
		AllList,
		ImageList,
		VideoList,
		Subjects,
		Sort,
		Sentiment,
		Del,
		FilterPop,
		Action
	},
	data() {
		return {
			isNavbar: true,
			isAllCheck: false,
			isSubjects: false,
			tabs: [
				{
					name: "全部"
				},
				{
					name: "图片识别"
				},
				{
					name: "短视频",
				}
			],
			tabCurrent: 0,
			selectRow: null,
			fillHeight: 0,

			isShowMask: false,
			filterList: [],
			filterTitle: "",
			filterId: "",
			tagParams: {
				tag_type: 1,
				tag_id: null,
				type: 1
			},
			actionData: {
				row: {},
				flag: ""
			}
		}
	},
	watch: {
		selectedArticle(val) {
			if(val.length == this.articleListLength){
				this.isAllCheck = true;
			}else{
				this.isAllCheck = false;
			}
		},
	},
	computed: {
		...mapState(["subjects", "selectedArticle", "articleListLength"]),
		currentSubject() {
			return this.$store.state.subjects;
		}
	},
	onUnload() {
		uni.hideLoading();
	},
	async created() {
		console.log("首页加载...");
		uni.showLoading({
			title: "加载中"
		});
		await this.getFilterList();
		this.$store.commit("isRefreshSubjectsListHandle", new Date().getTime());
		this.$store.commit("isRefreshAllListHandle", new Date().getTime());
		this.$store.commit("updateLocalDateTime", new Date());
	},
	methods: {
		async init() {
			await this.getFilterList();
			this.$store.commit("isRefreshAllListHandle", new Date().getTime());
		},
		async switchSubject() {
			this.filterId = "";
			this.filterList = [];
			if(!this.$store.state.subjects.length){
				this.tagParams.tag_type = 1;
				this.tagParams.tag_id = null;
			}else{
				this.tagParams.tag_type = this.$store.state.subjects[0].type==0 ? 2 : 3,
				this.tagParams.tag_id = this.$store.state.subjects[0].id;
			}
		},
		openSubjects() {
			uni.hideTabBar();
			this.isSubjects = true;
		},
		change(index) {
			this.tabCurrent = index;
			this.$store.state.multipleMode = false;
			this.isAllCheck = false;
			this.$store.commit("selectedArticleHandle", []);
			let that = null;
			if(index == 0){
				that = this.$refs.allList;
			}else if(index == 1){
				that = this.$refs.imgList;
			}else if(index == 2){
				that = this.$refs.videoList;
			}
			if(!that.list.length){
				uni.showLoading({
					title: "加载中"
				});
				that.getList();
			}
		},
		async getFilterList() {
			let {data} = await alias(this.tagParams);
			if(!!data.length){
				this.filterTitle = data[0].filter_title;
				this.filterId = data[0].id;
				this.$store.state.filterParams = data[0];
			}else{
				this.$store.state.filterParams = {};
			}
			this.filterList = data;
			this.filterList.map(item=>{
				item.label = item.filter_title;
				item.value = item.id;
			});
		},
		filterChange(val) {
			let filter = this.filterList.filter(item=>item.id == val)[0];
			this.filterId = val;
			this.filterTitle = filter.filter_title;
			this.$store.state.filterParams = {...this.$store.state.filterParams, ...filter};
			this.$store.commit("isRefreshAllListHandle", new Date().getTime());
			this.$store.commit("isRefreshImgListHandle", new Date().getTime());
			this.$store.commit("isRefreshVideoListHandle", new Date().getTime());
		},
		toPath(path) {
			uni.navigateTo({
				url: path
			})
		},
		checkAll(e) {
			if(this.tabCurrent == 0){
				this.$refs.allList.$emit("checkAll", e.value);
			}else if(this.tabCurrent == 1){
				this.$refs.imgList.$emit("checkAll", e.value);
			}else if(this.tabCurrent == 2){
				this.$refs.videoList.$emit("checkAll", e.value);
			}
		},
		addWarn() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				let ids = this.selectedArticle.map(item=>item.id);
				let subjectsId = this.selectedArticle.map(item=>item.subject_id);
				addAlert({
					id: ids,
					subject_id: subjectsId,
					summary: ""
				}).then(({code})=>{
					if(code == 200){
						this.$refs.uToast.show({
							title: "加入预警成功",
							type: "success",
						});
					}
				});
			}
		},
		markRead() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				let ids = this.selectedArticle.map(item=>item.id);
				toRead({ids: ids}).then(({code})=>{
					if(code == 200){
						uni.$emit("markRead",ids);
						this.$refs.uToast.show({
							title: "标记已读成功",
							type: "success",
						});
					}
				});
			}
		},
		changeSentiment() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				this.$store.state.isSentiment = true;
			}
		},
		del() {
			if(!this.selectedArticle.length){
				this.$refs.uToast.show({
					title: "请选择信息",
					type: "error",
				});
			}else{
				this.$store.state.isDel = true;
			}
		},
		handle_sort() {
			this.$store.state.isSort = true;
			uni.hideTabBar();
		},
		handle_multiple() {
			this.$store.state.multipleMode = !this.$store.state.multipleMode;
			if(this.$store.state.multipleMode){
				uni.hideTabBar();
			}else{
				uni.showTabBar();
			}
		},
		handle_filter() {
			this.$store.state.isFilter = true;
			uni.hideTabBar();
		},
		updateActionRow(row) {
			this.actionData = row;
		}
	}
}
</script>

<style lang="scss" scoped>
@import "@/style/index.scss";
</style>
